<template>
    <div class="system-dept-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="deptDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级机构" prop="parentId">
                            <el-tree-select :data="state.deptData"
                                            :disabled="state.dialog.type===`addChild`"
                                            :height="208"
                                            class="w100"
                                            v-model="state.ruleForm.parentId"
                                            clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="机构名称" prop="name">
                            <el-input v-model="state.ruleForm.name" placeholder="请输入机构名称" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="机构编码" prop="deptCode">
                            <el-input v-model="state.ruleForm.deptCode" placeholder="请输入机构编码"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="机构描述" prop="deptDesc">
                            <el-input v-model="state.ruleForm.deptDesc" placeholder="请输入机构描述"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="排序" prop="sortOrder">
                            <el-input v-model="state.ruleForm.sortOrder" placeholder="请输入排序" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemDeptDialog">
import {reactive, ref} from 'vue';
import DeptApi from "/@/api/system/DeptApi";
import {ElMessage} from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const deptDialogFormRef = ref();
const state = reactive({
    ruleForm: {
        deptId: '',
        parentId: '',
        name: '',
        deptCode: '',
        deptDesc: '',
        children: [],
        sortOrder: 0
    } as RowDeptType,
    deptData: [] as DeptTreeType[], // 机构数据
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});
const rules = ref({
    name: [{required: true, message: '机构名称不能为空', trigger: "blur"}],
    deptCode: [{required: true, message: '机构编码不能为空', trigger: "blur"}],
})
// 打开弹窗
const openDialog = (type: string, row: RowDeptType) => {
    deptDialogFormRef.value?.resetFields()
    state.dialog.type = type
    getDeptTree()
    if (type === 'add') {
        state.dialog.title = '新增机构';
        state.dialog.submitTxt = '新 增';
    }
    if (type === 'addChild') {
        state.ruleForm.parentId = row.deptId
        state.dialog.title = '新增下级机构';
        state.dialog.submitTxt = '新 增';
    }
    if (type === 'edit') {
        state.dialog.title = '修改机构';
        state.dialog.submitTxt = '修 改';
        DeptApi.view(row.deptId).then(res => {
            state.ruleForm = res.data
        })
    }
    state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    if (!state.ruleForm.parentId) {
        state.ruleForm.parentId = '0'
    }
    if (state.dialog.type === 'add' || state.dialog.type==='addChild') {
        DeptApi.insert(state.ruleForm).then(() => {
            ElMessage.success("添加成功！")
            closeDialog();
            emit('refresh');
        })
    } else {
        DeptApi.update(state.ruleForm).then(() => {
            ElMessage.success("修改成功！")
            closeDialog();
            emit('refresh');
        })
    }
};
/** 获取部门树 */
const getDeptTree = () => {
    DeptApi.getDeptTree().then(res => {
        state.deptData = res.data
    })
}
// 暴露变量
defineExpose({
    openDialog,
});
</script>
